<template>
  <el-row :gutter="20">
    <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12" style="
    text-align: center;
">
      <div style="box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)">
        <div>
          <div style="height:20px"></div>
          <b style="font-size: 30px;" v-text="test_info.testname"></b>
          <br />
          <div style="    color: teal;">
            生成日期：
            <label v-text="test_info.run_date">2010-29-29</label>
          </div>
        </div>
        <br />
        <div>
          运行时间：
          <label v-text="test_info.start_time"></label>~
          <label v-text="test_info.end_time"></label> (
          <label v-text="test_info.used_time"></label>)
        </div>
        <div id="c1"></div>
      </div>
    </el-col>
    <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
      <div style="box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)">
        <b style="font-size: 25px;padding-left: 10px;">运行结果统计：</b>

        <el-table :data="tableData" border style="width: 100%">
          <el-table-column prop="priority" label="优先级"></el-table-column>
          <el-table-column prop="success" label="成功"></el-table-column>
          <el-table-column prop="failed" label="失败"></el-table-column>
          <el-table-column prop="skip" label="未运行"></el-table-column>
          <el-table-column prop="all" label="合计"></el-table-column>
        </el-table>
      </div>
    </el-col>
    <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12" v-show="true">
      <div style="box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)">
        <b style="font-size: 25px;padding-left: 10px;">核心时间统计（仅统计成功用例）：</b>

        <el-table :data="core_time_list" border style="width: 100%">
          <el-table-column prop="priority" label="优先级"></el-table-column>
          <el-table-column
            prop="fast"
            :label="'快 (小于'+parseInt(config_info.core_time_line.fast/1000)+'s)'"
          ></el-table-column>
          <el-table-column
            prop="normal"
            :label="'一般 ('+parseInt(config_info.core_time_line.fast/1000)+'~'+parseInt(config_info.core_time_line.normal/1000)+'s间）'"
          ></el-table-column>
          <el-table-column
            prop="slow"
            :label="'慢 ('+parseInt(config_info.core_time_line.normal/1000)+'~'+parseInt(config_info.core_time_line.slow/1000)+'s间）'"
          ></el-table-column>
          <el-table-column prop="no" :label="'绝望 (大于'+parseInt(config_info.core_time_line.slow/1000)+'s)'"></el-table-column>
        </el-table>
      </div>
    </el-col>
    <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
      <div  style="box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)">
      <b style="font-size: 25px;padding-left: 10px;">运行结果柱状图：</b>
      <div id="c2"></div></div>
    </el-col>
    <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
      <div style="box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)">
        <b style="font-size: 25px;padding-left: 10px;">测试备注：</b>
        <div style="height:300px;padding-left: 15px;"  v-html="test_info.comm"></div>

    
      </div>
    </el-col>
    <!-- <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
      <div class="grid-content bg-purple-light"></div>
    </el-col>
    <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
      <div class="grid-content bg-purple-light"></div>
    </el-col> -->
  </el-row>
</template>

<script>
// import report_data from "../../static/js/data.js";
import { Chart, Util } from "@antv/g2";
export default {
  name: "HelloWorld",
  data() {
    return {
      msg: "Welcome to Your Vue.js App",
      test_info: report_data.test_info,
      tableData: report_data.case_table,
      config_info: report_data.conifg,
      core_time_list: report_data.case_time_table,

    };
  },
  mounted() {
    this.initComponent();
    // this.initTimeTable()
    this.initComponent2()
  },

  // 方法集合
  methods: {
     mergeSort(arr) {
    varlen = arr.length;
    if(len < 2) {
        returnarr;
    }
    varmiddle = Math.floor(len / 2),
        left = arr.slice(0, middle),
        right = arr.slice(middle);
    return this.merge(mergeSort(left), mergeSort(right));
},
 
 merge(left, right) {
    varresult = [];
 
    while(left.length>0 && right.length>0) {
        if(left[0] <= right[0]) {
            result.push(left.shift());
        } else{
            result.push(right.shift());
        }
    }
 
    while(left.length)
        result.push(left.shift());
 
    while(right.length)
        result.push(right.shift());
 
    returnresult;
},

    initComponent() {
      const chart = new Chart({
        container: "c1",
        // width: 600,
        height: 430,
        autoFit: true
      });
      chart.data(report_data.case_info_list);

      //chart.legend(false);
      chart.coordinate("theta", {
        radius: 0.75,
        innerRadius: 0.4
      });
      chart.tooltip({
        showMarkers: false
      });

      const interval = chart
        .interval()
        .adjust("stack")
        .position("value")
        .color("type", ["#dbe1e6", "#10ab0d", "#ff0000"])
        .style({ opacity: 0.4 })
        // .state({
        //   active: {
        //     style: (element) => {
        //       const shape = element.shape;
        //       return {
        //         matrix: Util.zoom(shape, 1.1),
        //       }
        //     }
        //   }
        // })
        .label("type", val => {
          return {
            // offset: -30,
            style: {
              opacity: 1,
              fontSize: 12
            },
            content: obj => {
              return obj.type + ":" + obj.percent;
            }
          };
        });

      chart.interaction("legend-active");
      // this.chart = chart;
      chart.render();
    },
   
    initComponent2(){
      const chart = new Chart({
  container: 'c2',
  autoFit: true,
  height: 300,
});
chart.data(report_data.case_table2);
chart.legend({
  position: 'right',
});

chart.tooltip({
  shared: true,
  showMarkers: false,
});
chart.interaction('active-region');

chart
  .interval()
  .adjust('stack')
  .position('priority*value')
  .color('status', [ "#dbe1e6","#ff0000","#10ab0d"])
  .label('value', (val) => {
 if (val < 5) {
      return null;
    }
    return {
      position: 'middle',
      offset: 0,
      content: (originData) => {
        return originData.value ;
      },
      style: {
        stroke: '#fff'
      }
    };
  });

chart.render();
    }
    // ,
    // mounted() {
    //   window.addEventListener(
    //     "resize",
    //     () => (this.clientWidth = `${document.documentElement.clientWidth}`),
    //     false
    //   );
    // }
  }
};
</script>

<style>
.el-col {
  border-radius: 4px;
  padding-bottom: 10px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
body{
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none;
}
</style>